<template>
  <div class="discount">
    <div class="description_content">
      <span :style="{background:'#'+activities[0].icon_color}">{{activities[0].icon_name}}</span>
      <span>{{activities[0].description}}</span>
      <span @click="isActiveShow = true">{{activities.length}}个优惠<i class="iconfont icon-xia"></i></span>
    </div>

    <!-- 优惠弹窗 -->
    <transition name="fade" v-if="isActiveShow">
      <div class="act-model mask animate__animated animate__fadeIn animate__faster" v-show="isActiveShow" @click="isActiveShow =false">
        <div class="actives-model animate__animated animate__slideInUp animate__faster">
          <i class="iconfont icon-chahao2 icon-close" @click="isActiveShow = false"></i>
          <div class="active-title">
            优惠活动
          </div>
          <div class="actives-list" v-for="(item,index) in activities" :key="index">
            <span :style="{background:'#'+item.icon_color}">{{item.icon_name}}</span>
            <span>{{item.description}}</span>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  props: {
    activities: Array
  },
  name: 'discount',
  data () {
    return {
      isActiveShow: false
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    closeActive () {

    }
  },
}
</script>
<style  scoped>
.discount {
  margin-bottom: 0.15rem;
}
span {
  display: inline-block;
  padding: 0.05rem 0;
  color: rgb(53, 52, 52);
  font-size: 0.1rem !important;
  margin-right: 0.3rem;
  font-weight: bold;
}
span:nth-child(1) {
  font-weight: bold;
  width: 0.8rem;
  text-align: center;
  color: aliceblue;
}
span:nth-child(3) {
  font-weight: normal;
  float: right;
  color: rgb(87, 86, 85);
}
.description_content {
  padding: 0.2rem 1rem 0 1rem;
  height: 0.5rem;
}
.description_content i {
  font-size: 0.2rem;
}
.actives-model {
  position: fixed;
  width: 100%;
  height: 6rem;
  bottom: 1rem;
  background-color: #fff;
  opacity: 1;
}

.active-title {
  font-size: 0.4rem;
  font-weight: bold;
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  color: black;
}
.actives-list {
  margin: 0.5rem;
}
.icon-close {
  position: absolute;
  right: 0.25rem;
  font-weight: bold;
  font-size: 0.6rem;
  top: 0.25rem;
}
/* .act-model {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
} */
.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 99999;
  background-color: rgba(0, 0, 0, 0.44);
}
</style>
